<template>
  <div class="Tabbar">
    <router-link tag="div" class="item" to="/recommend">
      <span>推荐</span></router-link
    >
    <router-link tag="div" class="item" to="/singer">
      <span>歌手</span></router-link
    >
    <router-link tag="div" class="item" to="/rank">
      <span>排行</span></router-link
    >
    <router-link tag="div" class="item" to="/search">
      <span>搜索</span></router-link
    >
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
@import "@/assets/css/variable.scss";
.Tabbar {
  width: 100%;
  height: 84px;
  display: flex;
  @include bg_sub_color();
  justify-content: space-around;
  // position: relative;
  // z-index: 9999;
  .item {
    span {
      line-height: 84px;
      @include font_size($font_medium);
      @include font_color();
    }
    &.router-link-active {
      span {
        @include font_active_color();
      }
      border-bottom: 5px solid #000;
      @include border_color();
    }
  }
}
</style>
